<template>
  <el-card>
    <div slot="header">
      <h3>区域商品起售量-单据查看</h3>
    </div>
    <div>
      <el-row>
        <SkusTable
          showPagination
          :defaultMinWidth="100"
          :tableHeight="480"
          :dataSource="TableInfo.list"
          :columns="TableInfo.columns"
          :loading="TableInfo.loading"
          :pagination="pagination"
          :total="pagination.total"
          :pageSizes="pageSizes"
          @pageChange="handlePageChange"
          @pageSizeSelect="handlePageSizeChange"
        />
      </el-row>
      <FooterFields :fields-data="footerFields" :fields-items="fieldsItems" />
    </div>
  </el-card>
</template>
<script>
import SkusTable from '@/components/skusTable';
import FooterFields from '@/pages/commodity/components/FooterFields/DataRender';
import { TableInfo } from '@/utils/getUtils';
import { VIEW_TABLE_COLUMNS, FOOTER_ITEMS } from './constants';
import skusPage from '@/mixins/commodity/skusPage';
import { getRecordDetailByRecordNoService } from '@/api/commodity/commodityInfoEdit/areaStartingSalesQuantity';
export default {
  mixins: [skusPage],
  components: {
    SkusTable,
    FooterFields
  },
  data () {
    return {
      recordNo: '',
      TableInfo: new TableInfo({ columns: VIEW_TABLE_COLUMNS }),
      footerFields: {},
      fieldsItems: FOOTER_ITEMS
    }
  },
  mounted () {
    this.recordNo = this.$route?.query?.recordNo
    this.getTableData()
  },
  methods: {
    async getTableData () {
      const data = {
        recordNo: this.recordNo,
        ...this.paginationParams
      }
      const res = await getRecordDetailByRecordNoService(data, this.TableInfo.setLoading)
      if (res?.retData) {
        const { pager } = res.retData
        this.TableInfo.setList(pager?.results)
        this.setTotalNum(pager.totalNum)
        this.footerFields = _.omit(res.retData, ['pager'])
      }
    },
  }
}
</script>
